<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="1300"
      :visible="visible"
      :getContainer="() => $refs.container"
      :maskStyle="{'top':'93px','left':'154px'}"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
      :cancelText="$t('placeholder.cancel')"
      style="top:20px;height: 95%;">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <!-- 搜索区域 -->
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item :label="$t('search.chequeNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :placeholder="$t('placeholder.pleaseInputChequeNumber')"
                         v-model="queryParam.chequeNumber"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item :label="$t('search.chequeDateRange')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-range-picker
                  style="width:100%"
                  v-model="queryParam.dateRange"
                  format="YYYY-MM-DD"
                  :placeholder="[$t('placeholder.pleaseInputStartTime'), $t('placeholder.pleaseInputEndTime')]"
                  @change="onDateChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item :label="$t('search.chequeStatus')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select :placeholder="$t('placeholder.pleaseInputChequeStatus')" v-model="queryParam.status">
                  <a-select-option value="0">{{ $t('status.unRealized') }}</a-select-option>
                  <a-select-option value="1">{{ $t('status.realized') }}</a-select-option>
                  <a-select-option value="2">{{ $t('status.checqueReturn') }}</a-select-option>
                  <a-select-option value="3">{{ $t('status.returnToCustomer') }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="searchQuery">{{ $t('button.search') }}</a-button>
                <a-button style="margin-left: 8px" @click="searchReset">{{ $t('button.reset') }}</a-button>
                <a-button type="primary" style="margin-left: 8px" @click="handleAdd" icon="plus">{{
                    $t('button.add')
                  }}</a-button>
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <a-table
        bordered
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          type: 'checkbox'
        }"
        @change="handleTableChange">
      </a-table>
      <cheque-modal class="cheque-modal" ref="modalForm" @ok="modalFormOk" @close="modalFormClose"
                    :getContainer="() => document.body"></cheque-modal>
    </a-modal>

  </div>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {mixinDevice} from '@/utils/mixin'
import i18n from '@/locales/i18n'
import ChequeModal from '@views/financial/modules/ChequeModal.vue'

export default {
  name: 'ChequeSelectList',
  components: {ChequeModal},
  mixins: [JeecgListMixin, mixinDevice],
  data () {
    return {
      title: '选择支票',
      visible: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 18, offset: 1 },
      queryParam: {
        chequeNumber: '',
        status: '',
        beginTime: null,
        endTime: null,
        dateRange: []
      },
      chequeModal: {
        visible: false
      },
      columns: [
        { title: this.$t('search.chequeNumber'), dataIndex: 'chequeNumber', width: 160 },
        { title: this.$t('search.chequeAmount'), dataIndex: 'amount', width: 160 },
        { title: this.$t('search.customer'), dataIndex: 'supplier', width: 140, ellipsis: true },
        {
          title: this.$t('search.status'), dataIndex: 'status', width: 80,
          customRender: (status) => {
            const statusMap = {
              0: this.$t('status.unRealized'),
              1: this.$t('status.realized'),
              2: this.$t('status.checqueReturn'),
              3: this.$t('status.returnToCustomer')
            }
            return statusMap[status] || status
          }
        },
        { title: this.$t('search.chequeDateRange'), dataIndex: 'createTimeStr', width: 120 }
      ],
      url: {
        list: '/cheque/list'
      }
    }
  },
  created () {
    this.title = this.$t('title.selectCheque')
  },
  methods: {
    show () {
      this.visible = true
      this.loadData(1)
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    onDateChange (dates, dateStrings) {
      this.queryParam.beginTime = dateStrings[0]
      this.queryParam.endTime = dateStrings[1]
    },
    handleCancel () {
      this.close()
    },
    handleOk () {
      //const selectedCheque = this.selectionRows[0]
      if (this.selectionRows.length) {
        this.$emit('ok', this.selectionRows)
      }
      this.close()
    },
    onSelectChange (selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    handleAdd() {
      this.$refs.modalForm.action = "add";
      if (this.btnEnableList.indexOf(2) === -1) {
        this.$refs.modalForm.isCanCheck = false
      }
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = i18n.t('button.add')
      this.$refs.modalForm.disableSubmit = false
    },
    modalFormOk() {
      // 添加成功后刷新列表
      this.loadData(1)
    },
    modalFormClose() {
      // 关闭模态框的回调
      this.$refs.modalForm.visible = false
    }
  }
}
</script>

<style>
/* 设置ChequeSelect的模态框的z-index */
.ant-modal-content {
  z-index: 1000 !important;
}

.cheque-modal .ant-modal {
  z-index: 3000 !important;
}

/* 确保ChequeModal的模态框z-index高于ChequeSelect的模态框 */
.j-modal .ant-modal {
  z-index: 2000 !important;
}
</style>